<template>
  <div class="menu" v-if="list">
    <router-link
      class="item"
      :class="{ active: active == index }"
      v-for="(item, index) in list"
      :key="index"
      :to="item.link"
    >
      <img :src="item.iconActive" v-if="active == index" />
      <img :src="item.icon" v-else />
      <div>{{ item.name }}</div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "AboutMenu",
  props: {
    list: {
      type: Array,
      default: ()=>[
        {
          icon: require("@/assets/icon/about2.png"),
          iconActive: require("@/assets/icon/about1.png"),
          name:"企业简介",
          link:{name:'about'}
        },
        {
          icon: require("@/assets/icon/about2.png"),
          iconActive: require("@/assets/icon/about1.png"),
          name:"组织结构",
          link:{name:'structure'}
        },
        {
          icon: require("@/assets/icon/about3.png"),
          iconActive: require("@/assets/icon/about1.png"),
          name:"企业文化",
          link:{name:'culture'}
        },
        {
          icon: require("@/assets/icon/about4.png"),
          iconActive: require("@/assets/icon/about1.png"),
          name:"社会责任",
          link:{}
        },
        {
          icon: require("@/assets/icon/about5.png"),
          iconActive: require("@/assets/icon/about1.png"),
          name:"资质与荣誉",
          link:{}
        },
      ],
    },
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
    };
  },
};
</script>
<style lang="scss" scoped>
.menu {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding: 0 113px;
  background: #ffffff;
  .item {
    width: 20%;
    text-align: center;
    padding: 34px 0 28px;
    position: relative;
    cursor: pointer;
    color: #747474;
    text-decoration: none;
    &.active {
      color: #0b8c6e;
      &::after {
        width: 0;
        height: 0;
        content: "";
        border-color: transparent transparent #eeeeee transparent;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}
</style>